<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色权限管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">

    <el-button type="primary" @click="showTreeDialog">角色授权</el-button>
    <!--数据表格-->
    <el-table
            ref="roleTable"
            :data="roles"
            @select-all="selectAll"
            @current-change="changeCurrent"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column label="编号">
            <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
            </template>
        </el-table-column>
        <el-table-column label="名称">
            <template slot-scope="scope">
                <span>{{ scope.row.roleName }}</span>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            @current-change="loginRoles"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <el-dialog title="角色授权" :visible.sync="dialogTreeVisible">
        <el-tree
                :data="functions"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                @check="checkTreeNode"
                :props="defaultProps">
        </el-tree>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                roles: null,
                total:0,//总条数
                current:1,//当前条数
                pageSize:5, //每页条数
                current1: null, //当前点击的角色
                dialogTreeVisible: false, //显示权限树对话框
                formLabelWidth: '120px', //表单标签的宽度
                functions: {
                    id: '',
                    menuName: ''
                }, //权限数据
                defaultProps: { //修改树属性的名称
                    children: 'subFunctions',
                    label: 'menuName'
                }
            }
        },
        mounted() {
            this.loginRoles(1);
            this.loginFunction();
        },
        methods: {
            loginRoles(current) {
                this.current=current;
                //加载角色
                axios.get("/roles?current="+current).then(value => {
                    this.roles = value.data.records;
                    this.total = value.data.total;
                    this.pageSize = value.data.size;
                    this.current = value.data.current;
                    console.log(value.data)
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
                this.role = row;
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                this.open(row)
                console.log(index, row);
            },
            loginFunction() {
                //加载所有的权限
                axios.get("/function").then(value => {
                    this.functions = value.data;
                    console.log(value.data)
                })
            },
            changeCurrent(row) {

                this.current1 = row;
                //取消所有的选择效果
                this.$refs.roleTable.clearSelection();
                //选中当前的行
                this.$refs.roleTable.toggleRowSelection(row);
            },
            //取消全选角色
            selectAll() {
                this.$refs.roleTable.clearSelection();
            },
            //显示授权树
            showTreeDialog() {
                if (this.current1) {
                    this.dialogTreeVisible = true;
                    axios.get("/functionzi/" + this.current1.id).then(value => {
                        this.$refs.tree.setCheckedKeys(value.data);
                    })
                } else {
                    this.$message("请选择角色");
                }
            },
            checkTreeNode(arg1, arg2) {
                console.log(arg1);
                console.log(arg2);
                //判断当前的权限id是否在选中的key中（勾选）
                if (arg2.checkedKeys.indexOf(arg1.id) != -1) {
                    axios.post("/role-functions",
                        {roleId: this.current1.id, menuId: arg1.id})
                        .then(value => {
                            if (value.data.code == 1) {
                                this.$message("添加权限成功");
                            }
                        });
                } else {
                    axios.delete("/role-functions/" + this.current1.id + "/" + arg1.id)
                        .then(value => {
                            if (value.data.code == 1) {
                                this.$message("删除权限成功");
                            }
                        });
                }
            }
        }
    })
</script>
</body>
</html>